<template>
    <div id="comb_view">
        <div id="game_218" class="game_view">
            <table class="u-table2">
                <thead>
                <tr style="display:none">
                    <th>7色波</th>
                </tr>
                <tr>
                    <th>色波</th>
                    <th>赔率</th>
                    <th>金额</th>
                    <th>色波</th>
                    <th>赔率</th>
                    <th>金额</th>
                </tr>
                </thead>
                <tbody>
                <TrItem :key="i" v-for="(row,i) in list[0]" :row="row" :bet-number="betNumber" :show-numbers="false"></TrItem>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import TrItem from "../components/TrItem";
    import {mapState} from "vuex";
    export default {
        name: 'LiangMian',
        components: {
            TrItem
        },
        data() {
            return {
                list:[
                    // 特大特小组合
                    [
                        [
                            {id:24842,name:'红波',bet:2.7,selected:false,hovering:false,amount:''},
                            {id:24843,name:'蓝波',bet:2.9,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24844,name:'绿波',bet:1.98,selected:false,hovering:false,amount:''},
                            {id:24845,name:'和局',bet:1.98,selected:false,hovering:false,amount:''},
                        ],
                    ],
                ]
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },
        watch:{
            betNumber(nVal){
                this.list.forEach((arr)=>{
                    arr.forEach((item)=>{
                        item.forEach((o)=>{
                            if (o.selected) {
                                o.amount = nVal
                            }
                        })
                    })
                })
                this.$forceUpdate()
            }
        },
        methods: {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
